<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="frame/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <style type="text/css">
        html,body{
            height: 100%;
            width: 100%;
        }
        #container{
            height: 100%;
            width: 100%;
            padding: 20px 10px 0px 10px;

        }
    </style>
    <script src="frame/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="frame/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div id = "container">
        <div id = "search_div">
            <form action="" id="search_form">
                <div class="form-group row">
                    <label class="col-form-label col-1">姓名:</label>
                    <div class="col-3">
                        <input type="text" id="eName" class="form-control" name="ename">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-1">最低工资:</label>
                    <div class="col-3">
                        <input type="text" id="losal" class="form-control" name="losal">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-1">最高工资:</label>
                    <div class="col-3">
                        <input type="text" id="hisal" class="form-control" name="hisal">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-1">部门：</label>
                    <div class="col-3">
                        <select  id="deptno" class="form-control" name="deptno">
                            <option value="10">测试10</option>
                            <option value="20">研发20</option>
                            <option value="30">运维30</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-2"></label>
                    <div class="col-3">
                        <button type="button" class="btn btn-info btn-lg" id="btn-search" >搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <div id = "show_div">
            <table class="table table-hover table-striped table-bordered">
                <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="selectAll">
                    </td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>工作</td>
                    <td>入职时间</td>
                    <td>工资</td>
                    <td>部门</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="table_data">
                <tr>
                    <td>
                        <input type="checkbox" name="ids" value="1">
                    </td>
                    <td>1</td>
                    <td>李老八</td>
                    <td>coder</td>
                    <td>2021-07-13</td>
                    <td>20000</td>
                    <td>研发部</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">编辑</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="ids" value="1">
                    </td>
                    <td>1</td>
                    <td>李老八</td>
                    <td>coder</td>
                    <td>2021-07-13</td>
                    <td>20000</td>
                    <td>研发部</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">编辑</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="ids" value="1">
                    </td>
                    <td>1</td>
                    <td>李老八</td>
                    <td>coder</td>
                    <td>2021-07-13</td>
                    <td>20000</td>
                    <td>研发部</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">编辑</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 删除功能的模态框 -->
    <div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    你确定要删除[<span id="delName"></span>]吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>
                </div>
            </div>
        </div>
    </div>
<!-- 修改的模态框   -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">编辑</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="" id="editForm">
                        <input type="hidden" name="empno" id="edit_empno">
                        <div class="form-group row">
                            <label class="col-form-label col-2">员工姓名：</label>
                            <div class="col-4">
                                <input type="text" class="form-control" name="ename" id="edit_ename">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2">工作：</label>
                            <div class="col-4">
                                <input type="text" name="job" id="edit_job" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="doEdit()">确定</button>
                </div>
            </div>
        </div>
    </div>
<!--    修改模态框结束-->
    <script>
        jQuery(function () {
            jQuery.post("deptController/searchAll",function (rst) {
                let ops = `<option value="">所有部门</option>`;
                for(let i=0;i<rst.length;i++){
                    let dept = rst[i];
                    ops += `
                    <option value="${dept.deptno}">${dept.dname}</option>>
                    `;
                }
                jQuery("#deptno").html(ops);
            },"json");

            jQuery("#btn-search").click(function () {

                //依次获取页面每一个控件的数据
                // let ename = jQuery("#eName").val();
                // let losal = jQuery("#losal").val();
                // let hisal = jQuery("#hisal").val();
                // let deptno = jQuery("#deptno").val();
                // console.log(ename);
                //一次性获取
                /**
                 * 前提：
                 * 必须使用form表单表标签包裹
                 * 所有表单控件必须提供name属性，按钮和确认密码除外
                 */
                //获取字符串格式数据
                init();
                //
            });
        });
        let empno;
        function showDeleteDialog(emp) {

            //采用bootstrap内置模态框
            //第一步，引入需要的js文件，必须在jQuery的后面
            //第二步，在页面中编写模态框的内容
            empno = emp.empno;
            jQuery("#delName").html(emp.ename);
            jQuery("#delModal").modal('show');

        }
        function doDelete() {
            jQuery.post("empController/delete",{"empno":empno},function (rst) {
                if(rst>0){
                    alert("删除成功！")
                    init();
                }else{
                    alert("删除失败!")
                }
                jQuery("#delModal").modal('hide');
            });
        }
        function init() {
            let formData = jQuery("#search_form").serialize();
            console.log(formData);
            //提交数据，使用AJAX
            jQuery.post("empController/search",formData,function (rst) {
                //更新数据
                let rows = "";
                for(let i=0;i<rst.length;i++){
                    let emp = rst[i];
                    rows += `
                <tr>
                    <td>
                        <input type="checkbox" name="ids" value="${emp.empno}">
                    </td>
                    <td>${emp.empno}</td>
                    <td>${emp.ename}</td>
                    <td>${emp.job}</td>
                    <td>${emp.hiredate}</td>
                    <td>${emp.sal}</td>
                    <td>${emp.deptno}</td>
                    <td>
                        <a href='javascript:showDeleteDialog(${JSON.stringify(emp)})'>删除</a>
<!--                        注意：属性的值必须使用 ''包裹，不允许使用双引号 -->
                        <a href='#' onclick='showEditDialog(${JSON.stringify(emp)})'>编辑</a>
                    </td>
                </tr>
                        `;
                }
                jQuery("#table_data").html(rows);
            },"json");//仅当rst中存放的是对象才可以，用于查询
        }

    </script>
    <script>
        function showEditDialog(emp) {
            jQuery("#edit_empno").val(emp.empno);
            jQuery("#edit_ename").val(emp.ename);
            jQuery("#edit_job").val(emp.job);
            jQuery("#editModal").modal("show");
        }

        function doEdit() {
            let formData = jQuery("#editForm").serialize();
            jQuery.post("empController/edit",formData,function (rst) {
                if(rst>0){
                    alert("修改成功！");
                    jQuery("#editModal").modal("hide");
                    init();
                }else{
                    alert("修改失败！")
                }
            });
        }
    </script>
</body>
</html>